<template>
  <div>
    <div>
      <el-table :data="peopleList" border style="width: 100%">
        <el-table-column label="角色名称" prop="label" align="center"></el-table-column>
        <el-table-column label="用户" prop="userNames" align="center">
          <template slot-scope="scope">
            <span style="color:#66b1ff;cursor:pointer;" @click="setPeople(scope.row)">{{scope.row.userNames.join(',')}}</span>
            <span style="color:#66b1ff;cursor:pointer;" v-if="scope.row.userIds.length === 0" @click="setPeople(scope.row)">添加</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import * as dd from 'dingtalk-jsapi'
  import formUtil from '@/utils/formUtil'

  export default {
    data () {
      return {
        peopleList: [{
          label: 'MPB管理员',
          userIds: [],
          userNames: [],
          roleId: '1265175017173348354'
        }, {
          label: 'MPB普通用户',
          userIds: [],
          userNames: [],
          roleId: '1265176800377499649'
        }]
      }
    },
    components:{

    },
    mixins: [dingMixin],
    mounted(){
      this.getPeople();
    },
    methods: {
      async getPeople() {
        let data = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: '1265175017173348354'})
        this.peopleList[0].userIds = []
        this.peopleList[0].userNames = []
        data.forEach((item) => {
          this.peopleList[0].userIds.push(item.emplId);
          this.peopleList[0].userNames.push(item.name);
        })

        let data2 = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: '1265176800377499649'})
        this.peopleList[1].userIds = []
        this.peopleList[1].userNames = []
        data2.forEach((item) => {
          this.peopleList[1].userIds.push(item.emplId);
          this.peopleList[1].userNames.push(item.name);
        })
      },
      setPeople(item) {
        this.complexPicker(300, [], item.userIds).then(async (data)=>{
          let users = data.map(item => item.emplId);
          let names = data.map(item => item.name);
          if(! await this.$httpN.postQ('sys/user/setUserRole', {dingIds: users.join(','), roleId: item.roleId})) return ;
          formUtil.submitSuccess('设置成功');
          this.getPeople();
        })
      }
    }
  }
</script>
